<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="style.css" />
    <title>To-Do-List</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md"></div>
        <div class="col-md-7 overflow-auto" id="main-content">
          <!-- Button trigger modal -->
          <div class="text-center">
            <button
              type="button"
              class="btn addBtn"
              data-bs-toggle="modal"
              data-bs-target="#exampleModal"
            >
              Add a Task
            </button>
          </div>
          <!-- Modal -->
          <div
            class="modal fade"
            id="exampleModal"
            tabindex="-1"
            aria-labelledby="exampleModalLabel"
            aria-hidden="true"
          >
            <div class="modal-dialog modal-dialog-centered">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel">Welcome!</h5>
                  <button
                    type="button"
                    class="btn-close"
                    data-bs-dismiss="modal"
                    aria-label="Close"
                  ></button>
                </div>
                <div class="modal-body">
                  <!-- form -->
                  <form>
                    <div class="mb-3">
                      <label for="taskName" class="form-label">Task Name</label>
                      <input type="text" class="form-control" id="taskName" />
                    </div>
                    <div class="mb-3">
                      <label for="deadline" class="form-label">Deadline</label>
                      <input type="date" class="form-control" id="deadline" />
                    </div>
                    <div class="mb-3">
                      <label for="time" class="form-label">Time</label>
                      <input type="time" class="form-control" id="time" />
                    </div>
                  </form>
                </div>
                <div class="modal-footer">
                  <button
                    type="button"
                    class="btn btn-secondary"
                    data-bs-dismiss="modal"
                  >
                    Close
                  </button>
                  <button type="submit" class="btn btn-primary" id="submitBtn">
                    Submit
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md"></div>
      </div>
    </div>

    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
      crossorigin="anonymous"
    ></script>
    <script src="script.js"></script>
  </body>
</html>
